import React from "react";
import Admin from "../../../layout/Admin";
import AdModel from "../../../model/ad";
import {Button, Form, Input, Modal, Popover, Radio, Table, Upload} from "antd";
import Info from "../../../service/info";
import {Image} from "echarts/src/util/graphic";
import PaginationFooter from "../../../component/PaginationFooter/PaginationFooter";
import {formLayout, formTailLayout} from "../../operation/vote/vote";
import {UploadOutlined} from "@ant-design/icons";
import {getBase64} from "../../finance/mall/mall";
const log = console.log.bind(console)

class Ad extends React.Component{
    constructor(props) {
        super(props)
        this.model = new AdModel()
        this.columns = [
            // Id: 4
            {
                dataIndex: 'Id',
                title: 'Id',
            },
            // Clickurl: "一起看"
            {
                dataIndex: 'Clickurl',
                title: '跳转地址',
            },
            // Isclose: 1
            // {
            //     dataIndex: 'Isclose',
            //     title: '是否显示',
            //     render: (flag) => flag
            // },
            // Showstate: 1
            {
                dataIndex: 'Showstate',
                title: '是否显示',
                render: (state, record) => {
                    const text = state === 1 ? '隐藏' : '显示'
                    return <a onClick={() => this.set(record)}>{text}</a>
                }
            },

            {
                dataIndex: 'Photourl',
                title: '图片',
                render: (url) => {
                    const content = <img src={url} alt='' style={{width: '300px',}}/>
                    return <Popover content={content} title="广告图" trigger="click">
                        <a>查看</a>
                    </Popover>

                }
            },
            // Jumptype: "1"
            {
                dataIndex: 'Jumptype',
                title: '跳转类型',
                render: (type) => {
                    const ends = ['无跳转', '内部', '外部',]
                    return ends[type]
                }
            },
            {
                title: '操作',
                render: (record) => {
                    return <div className='action-links'>
                        <a onClick={() => this.delete(record)}>删除</a>
                    </div>
                }
            }
        ]
        this.state = {
            p: 0,
            list: [],
            previewImage: '',
            previewTitle: '',
            image: [],
            modal: {
                add: false,
                preview: false,
            },
        }
    }

    componentDidMount() {
        this.all()
    }

    all() {
        const params = {
            P: this.state.p,
        }

        this.model
            .all(params)
            .then(res => {
                const data = res.data.ok
                this.setState({
                    list: data,
                })
            })
    }

    add = (values) => {
        log(values)
        log(this.state.image)

        const params = {
            ...values,
            photo: this.state.image[0],
        }
        //
        this.model
            .add(params)
            .then(res => {
                const data = res.data.ok
                if (data === 1) {
                    Info.success('添加成功')
                    this.addForm.resetFields()
                    this.setState({
                        image: [],
                    })
                    this.cancelModal('add')
                    this.all()
                }
            })
    }

    set(data) {
        const params = {
            Id: data.Id,
            State: data.Showstate === 1 ? 2 : 1,
        }

        this.model
            .set(params)
            .then(res => {
                const data = res.data.ok
                if (data === 1) {
                    Info.success('修改成功')
                    this.all()
                }
            })
    }

    delete(record) {
        const params = {
            Id: record.Id,
        }

        this.model
            .delete(params)
            .then(res => {
                const data = res.data.ok
                if (data === 1) {
                    Info.success('删除成功')
                    this.all()
                }
            })
    }

    prevPage = () => {

        const p = this.state.p - 1
        this.setState({
            p,
        }, () => this.all())

    }

    nextPage = () => {

        const p = this.state.p + 1
        this.setState({
            p,
        }, () => this.all())

    }

    callModal(key) {
        this.setState({
            ...this.state,
            modal: {
                ...this.state.modal,
                [key]: true,
            }
        })
    }

    cancelModal(key) {
        this.setState({
            ...this.state,
            modal: {
                ...this.state.modal,
                [key]: false
            }
        })
    }

    uploadInputProps = (name) => {

        const fileList = this.state[name]

        return {

            onRemove: file => {
                this.setState(state => {
                    const index = state[name].indexOf(file);
                    const newFileList = state[name].slice();
                    newFileList.splice(index, 1);
                    return {
                        [name]: newFileList,
                    }
                })
            },

            beforeUpload: () => false,

            onChange: ({fileList,}) => {
                this.setState({
                    [name]: fileList,
                })
            },

            onPreview: async (file) => {
                if (!file.url && !file.preview) {
                    file.preview = await getBase64(file.originFileObj);
                }

                this.setState({
                    previewImage: file.url || file.preview,
                    previewTitle: file.name || file.url.substring(file.url.lastIndexOf('/') + 1),
                }, () => this.callModal('preview'));
            },

            fileList,
        }

    }


    render() {
        return <>
            <Modal
                visible={this.state.modal.preview}
                title={this.state.previewTitle}
                footer={null}
                onCancel={() => this.cancelModal('preview')}
            >
                <img alt="example" style={{ width: '100%' }} src={this.state.previewImage} />
            </Modal>
            <Modal
                visible={this.state.modal.add}
                onCancel={() => this.cancelModal('add')}
                footer={null}
                title='添加广告'
                width='80%'
            >
                <Form
                    {...formLayout}
                    name='add'
                    ref={el => this.addForm = el}
                    onFinish={this.add}
                >
                    <Form.Item
                        label="跳转内容"
                        name="clickurl"
                        rules={[
                            {
                                required: true,
                                message: '请输入跳转内容',
                            },
                        ]}
                    >
                        <Input placeholder='请输入跳转内容'/>
                    </Form.Item>
                    <Form.Item
                        name="jumptype"
                        label="跳转类型"
                        rules={[
                            {
                                required: true,
                                message: '请选择跳转类型',
                            },
                        ]}
                    >
                        <Radio.Group>
                            <Radio value={0}>无跳转</Radio>
                            <Radio value={1}>内部</Radio>
                            <Radio value={2}>外部</Radio>
                        </Radio.Group>
                    </Form.Item>

                    <Form.Item
                        label="上传图片"
                    >
                        <Upload
                            listType="picture-card"
                            fileList={this.state.image}
                            {...this.uploadInputProps('image')}
                            multiple={false}
                        >
                            <Button icon={<UploadOutlined />}>Click to upload</Button>
                        </Upload>
                    </Form.Item>

                    <Form.Item {...formTailLayout}>

                        <Button type="primary" htmlType="submit">
                            Submit
                        </Button>

                    </Form.Item>
                </Form>
            </Modal>
            <Admin>
                <div className='list-container'>
                    <p>投屏广告管理</p>
                    <Button
                        style={{marginBottom: '8px',}}
                        onClick={() => this.callModal('add')}
                    >添加广告</Button>
                    <Table
                        dataSource={this.state.list}
                        columns={this.columns}
                        rowKey={(record, index) => index}
                        pagination={false}
                    />
                    <PaginationFooter
                        pageIndex={this.state.p}
                        prevPage={this.prevPage}
                        nextPage={this.nextPage}
                    />

                </div>
            </Admin>
        </>
    }
}

export default Ad